[#ftl]
[@define "agile.MultiValueMetadataEditor","agile._MetadataEditor"]
//summary:multipe select editor template for metadata
    [#assign templateString]	
	<form style="background-color:#afeeee">
		<div data-dojo-type="agile.MultiSelectEditorX" data-dojo-attach-point="selector">
		 	[#--//nested property editors which contribute to the option value/label 	 
		 	 <div data-dojo-type='agile.NumberComboBox' class="meditor" data-dojo-props='name:"xxx",htmlName:"xx",fireOnChange:false'></div>
		 	 <div data-dojo-type='agile.NumberComboBox' class="meditor" data-dojo-props='name:"yyy",htmlName:"yy",fireOnChange:false'></div>
		 	 --]
	 	</div>
	 </form> 
 	[/#assign]
 	templateString:"${templateString?js_string}"	
	//a list of names of properties to be serialized in sequence
	//e.g. ["xxx","yyy"] 
 	,propertyNames:null 
 	,delimeter:" "
 	,init:function(){
		this.inherited(arguments);
		if(this.propertyNames == null){
			this.propertyNames = [];
		}
		
		this.selector.containedEditor = this;
		
		this.meditors = {};
		query(".meditor",this.selector.containerNode).forEach(function(node){
			var meditor = registry.byNode(node);
			this.meditors[meditor.htmlName?meditor.htmlName:meditor.name] = meditor;
		},this);
		
		if(this.propertyNames.length == 1){
			this._singleValue = true;
		}
	 }
 	,getKey:function(){
 		//summary: the unique key for an option(metadata) to support update feature, otherwise a new option will be created 
		 return null;
	}
 	,format:function(){
 		//summary:serialize the property editors' value into text to be shown in the multi-select
 		return this.valueToString();
	}
 	,parse:function(text){
 		//summary: translate the text to values for the property editors to display
 		this.stringToValue();
 	}
	,processBeforeAdd:function(){
		return true;
	}
	
 	 ,valueToString:function(){
 		 //summary:transform values property editors to an item, the item will be wrapped by an option node and added to the Multi-Select
 		 //item attribute:
 		 //1) key : the identifier of the item to prevent duplicated items in the Multi-Select
 		 //2) value : the value of the item (value of option node)
 		 //3) label : the description of the item (label of option node)
 		 //
 		 if(this.isValid()){
 			 var key = this.getKey();
	 		 var value = this.meditors[this.propertyNames[0]].get("value");
	 		 for(var i = 1; i < this.propertyNames.length; i++){
	 			 value += this.delimeter + this.meditors[this.propertyNames[i]].get("value") ;
	 		 }
	 		 value = value.trim();
	 		 if(value && value != "null"){
	 			return [key==null?value:key,value,value]; 
	 		 }
//	 		 return value.trim() == "null"?null:[this.getKey()==null?value.trim():this.getKey(),value.trim()];
 		 }
 		 return null;
 	 }
 	 ,stringToValue:function(text){
 		 
 		//summary:decompose a single text from the Multi-Select to property editors
 		
 		 if(text){
	 		var values = text.split(this.delimeter);
	 		for(var i = 0; i < this.propertyNames.length; i++){
	 			this.meditors[this.propertyNames[i]].reset1("value",values[i]);
	 		}
 		 }else{
	 		for(var i = 0; i < this.propertyNames.length; i++){
	 			this.meditors[this.propertyNames[i]].reset1("value","");
	 		}
 		 }
 	 }
// 	 ,onOptionRemoved:function(options){ 		 
// 		//clear the editor value
// 		this.clearValue();
//// 		this.onValueChange(this.selector.get("value"));
// 		this.onChange(this.selector.get("value"),this.name,this.htmlName);
// 	 }
	 ,onValueChange:function(value){
		 this.onChange(value,this.name,this.htmlName);
	 }
	,onOptionUpdated:function(options){
	   this.onChange(this.selector.get("value"),this.name,this.htmlName);
	}
//   ,onOptionAdded:function(options){
//	   this.onChange(this.selector.get("value"),this.name,this.htmlName);
//   }
   ,onOptionRemoved:function(options){
	   this.clearValue();
	   this.onChange(this.selector.get("value"),this.name,this.htmlName);
   }
   ,clearValue:function(){
	   for (var e in this.meditors){
		   this.meditors[e].reset1("value",null);
	   }
   }
	,get:function(name){		
		if(name == "value"){
			//get all options from the selector and format them to text
			return this.selector.get("value");
		}
		return this.inherited(arguments);
	}
	,set:function(name,value){
		if(name == "value"){
			//console.info(this.declaredClass,"MultiValueMetadataEditor$$$$$value:",value,this.htmlName);
			if(this._singleValue){
				this.selector.set(name,value);	
				this.value = value;
			}else{
				this.selector.set(name,value?value[this.htmlName]:null);
				this.value = value?value[this.htmlName]:null;
			}			
//			this.inherited("set",["value",this.value]);
		}else if(name == "disabled" || name == "readOnly"){
			this.selector.set(name,value);	
			for(var e in this.meditors){
				this.meditors[e].set(name,value);
			}
		}else{
			this.inherited(arguments);
		}
	}
	,reset1:function(name,value){
		if(name == "value"){
			//console.info(this.declaredClass,"##MultiValueMetadataEditor******value:",value,this.htmlName);				
			if(this._singleValue){
				this.selector.reset1(name,value);	
				this.value = value;
			}else{
				this.selector.reset1(name,value?value[this.htmlName?this.htmlName:this.name]:null);
				this.value = value?value[this.htmlName?this.htmlName:this.name]:null;
			}
//			this.inherited("set",["value",this.value]);
		}else if(name == "disabled" || name == "readOnly"){
			this.selector.reset1(name,value);	
			for(var e in this.meditors){
				this.meditors[e].set(name,value);
			}
		}
		else{
			this.inherited(arguments);
		}
	}
	,isValid:function(){	
		for(var e in this.meditors){
			if(!this.meditors[e].isValid()){
				return false;
			}
		}
		return true;
 	}
[/@]
